<template>
  <transition name="normal">
    <div class="normal-player" v-show="fullScreen">
      <!-- 背景图 -->
      <div class="background">
        <img width="100%" height="100%" :src="imgsrc" />
      </div>
      <!-- 头部 -->
      <div class="top">
        <div class="back" @click="back(false)">
          <i class="icon-back"></i>
        </div>
        <h1 class="title" v-html="currentSong.name"></h1>
        <h2 class="subtitle">
          <span v-for="item of currentSong.singer" :key="item.id">{{item.name}}</span>
        </h2>
      </div>
      <!-- 中间 -->
      <div class="middle" @touchstart.prevent="middleTouchStart" @touchmove.prevent="middleTouchMove" @touchend="middleTouchEnd">
        <!-- 左边图片 -->
        <div class="middle-l" ref="middleL">
          <div class="cd-wrapper" ref="cdWrapper">
            <div class="cd">
              <img class="image" :src="imgsrc" :class="rorate" />
            </div>
          </div>
          <!-- 当前播放的歌词 -->
          <div class="playing-lyric-wrapper">
            <div class="playing-lyric">{{playingLyric}}</div>
          </div>
        </div>
        <!-- 右边歌词 -->
        <scroll class="middle-r" ref="lyricList" :list="currentLyric && currentLyric.lines">
          <div class="lyric-wrapper">
            <div v-if="currentLyric">
              <p ref="lyricLine" class="text" v-for="(line, index) in currentLyric.lines" :key="index" :class="{'current': currentLineNum === index}" @dblclick="playCurrentLyric(line)">
                {{line.txt}}
              </p>
              <p v-show="currentLyric.lines.length === 0" class="nolyric">
                该歌曲暂无歌词
              </p>
            </div>
          </div>
        </scroll>
      </div>
      <div class="bottom">
        <!-- 左右切换分页显示 -->
        <div class="dot-wrapper">
          <span class="dot" :class="{'active': currentShow === 'cd'}"></span>
          <span class="dot" :class="{'active': currentShow === 'lyric'}"></span>
        </div>
        <!-- 进度条 -->
        <div class="progress-wrapper">
          <span class="time time-l">{{forMat(currentTime)}}</span>
          <div class="progress-bar-wrapper">
            <progress-bar :precent="precent" @precentChange="precentChange" />
          </div>
          <span class="time time-r">{{forMat(currentSong.interval)}}</span>
        </div>
        <!-- icon图标操作区域 -->
        <div class="operators">
          <div class="icon icon-l" @click="changeMode">
            <i :class="iconMode"></i>
          </div>
          <div class="icon icon-l" @click="changeIndex(-1)">
            <i class="icon-prev"></i>
          </div>
          <div class="icon icon-center" @click="changePlaying" :class="disabledCls">
            <i :class="playIcon"></i>
          </div>
          <div class="icon icon-r" @click="changeIndex(1)">
            <i class="icon-next"></i>
          </div>
          <div class="icon icon-r" @click="toggleFavorite(currentSong)">
            <i :class="getFavoriteIcon(currentSong)"></i>
          </div>
        </div>
      </div>
      <Toast title="抱歉！该歌曲暂无播放地址" v-show="audioSrc == undefined"></Toast>
    </div>
  </transition>
</template>

<script>
import { mapState } from 'vuex'
import progressBar from 'components/progress-bar/progressBar'
import scroll from 'components/base/Scroll'

import Toast from 'components/base/Toast'
export default {
  components: {
    progressBar,
    scroll,
    Toast
  },
  props: {
    imgSrc: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  computed: {
    ...mapState(['fullScreen'])
  },
  methods: {}
}
</script>

<style scoped lang='stylus'></style>